<template>
  <div class="c-admin-menu">
    <div class="c-admin-menu-header">
      <div class="c-admin-menu-logo"></div>
      <div class="c-admin-menu-title" v-show="!collapse">
        {{ multLang('title_asset_u') }}
      </div>
    </div>

    <div class="c-admin-menu-body">
      <el-scrollbar>
        <el-menu
          :default-active="activeMenu"
          :collapse="collapse"
          unique-opened
          :collapse-transition="false"
        >
          <template v-for="menu in menus">
            <template v-if="menu.children">
              <el-submenu :index="menu.route || menu.id" :key="menu.id">
                <template slot="title">
                  <c-icon
                    :name="menu.icon"
                    class="c-admin-menu-body-icon"
                  ></c-icon>
                  <span class="c-admin-menu-body-title">{{
                    multLang(menu.langkey)
                  }}</span>
                </template>
                <template v-if="menu.children">
                  <template v-for="child in menu.children">
                    <el-menu-item
                      :index="child.route || child.id"
                      :key="child.id"
                      @click="toRoute(child.route)"
                    >
                      <template slot="title">
                        <span class="c-admin-menu-body-title">{{
                          multLang(child.langkey)
                        }}</span>
                      </template>
                    </el-menu-item>
                  </template>
                </template>
              </el-submenu>
            </template>
            <template v-else>
              <el-menu-item
                class="c-admin-menu-body_sup"
                :index="menu.route || menu.id"
                :key="menu.id"
                @click="toRoute(menu.route)"
              >
                <c-icon
                  :name="menu.icon"
                  class="c-admin-menu-body-icon"
                ></c-icon>
                <span class="c-admin-menu-body-title">{{
                  multLang(menu.langkey)
                }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </el-scrollbar>
    </div>
    <div :class="supportClass">
      <span>{{ multLang('title_af_s') }}</span>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex'
import { toRoute } from '@/util/router'
export default {
  name: 'CAdminMenu',
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {
    ...mapState({
      menus: state => state.menu.menus,
      menusMap: state => state.menu.menusMap,
      collapse: state => state.menu.collapse,
      activeMenu: state => state.menu.activeMenu,
      activeMenus: state => state.menu.activeMenus
    }),
    ...mapGetters({
      getMenu: 'menu/get'
    }),
    supportClass() {
      const sc = ['c-admin-menu-support']
      this.collapse && sc.push('c-admin-menu-support-hide')
      return sc
    }
  },
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    ...mapActions({
      setActiveMenu: 'menu/setActiveMenu'
    }),
    toRoute(to) {
      to && toRoute(to, { from: this.$route.name })
    }
  }
}
</script>
<style lang="scss">
@include admin {
  .c-admin-menu {
    height: 100%;
    transition: all 0.3s;
    &-header {
      height: 60px;
      line-height: 60px;
      text-align: center;
      font-size: 0;
      overflow: hidden;
      @include theme('logo-primary', 'background-color');
      @include theme('logo-text', 'color');
    }

    &-logo,
    &-title {
      display: inline-block;
      vertical-align: middle;
    }
    &-logo {
      @include wh(50px, 50px);
      @include img(
        (
          url: 'logo.png',
          size: contain
        )
      );
    }
    &-title {
      font-size: 22px;

      width: calc(100% - 50px);
      overflow: hidden;
      word-break: keep-all;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &-body {
      $menu-body: &;
      height: calc(100% - 96px);
      @include theme('menu-primary', 'background-color');
      .el-scrollbar {
        @include wh;
        .el-scrollbar__wrap {
          overflow-x: hidden;
        }
      }
      .el-menu {
        @include wh;
        border: 0;
        .el-menu-item,
        .el-submenu__title {
          height: 54px;
          line-height: 54px;
        }
        //菜单 一级
        .el-submenu {
          .el-submenu__title {
            @include theme('menu-primary', 'background-color');
            .c-admin-menu-body-icon,
            .c-admin-menu-body-title {
              @include theme('menu-item-text', 'color');
            }
            &:hover {
              .c-admin-menu-body-icon,
              .c-admin-menu-body-title {
                @include theme('menu-item-text-hover', 'color');
              }
            }
          }
        }
        .el-menu-item {
          @include theme('menu-item', 'background-color');
          &:hover {
            .c-admin-menu-body-icon,
            .c-admin-menu-body-title {
              @include theme('menu-item-text-hover', 'color');
            }
          }
          &.c-admin-menu-body_sup {
            @include theme('menu-primary', 'background-color');
          }
          .c-admin-menu-body-icon,
          .c-admin-menu-body-title {
            @include theme('menu-item-text', 'color');
          }
          &.is-active {
            @include theme('menu-item-active', 'background-color');
            .c-admin-menu-body-icon,
            .c-admin-menu-body-title {
              @include theme('menu-item-text-active', 'color');
            }
            &.c-admin-menu-body_sup {
              @include theme('menu-item-active', 'background-color');
              .c-admin-menu-body-icon,
              .c-admin-menu-body-title {
                @include theme('menu-item-text-active', 'color');
              }
            }
          }
        }
      }
      &-icon {
        margin-right: 14px;
        vertical-align: middle;
      }
      &-title {
        display: inline-block;
        height: 20px;
        line-height: 20px;
        vertical-align: middle;
      }
    }
    &-support {
      height: 36px;
      line-height: 36px;
      font-size: 12px;
      text-align: center;
      @include theme('menu-primary', 'background-color');
      @include theme('menu-item-text', 'color');
      overflow: hidden;
      &-hide {
        > span {
          transition: all 0.5s;
          opacity: 0;
        }
      }
    }
  }
}
</style>
